<template>
  <div>
    <h1>文件上传-base64</h1>
    <input type="file" ref="file">
    <button @click="upload">上传</button>
    <img :src="img" alt="">
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      img: ""
    }
  },
  methods: {
    upload() {
      // 获取文件域里的文件信息
      // base64 是一个字符串只不过能当成图片来用 可以直接存入到数据库
      const file = this.$refs.file.files[0]
      // js 内置的文件读取对象
      const fileReader = new FileReader()
      // 监听文件读取完毕
      fileReader.onload = (res) => {
        console.log(res.target.result)
        // res.target.result 保存着读取完毕的base64位数据
        this.img = res.target.result
      }
      // 通过文件读取对象读取文件信息
      fileReader.readAsDataURL(file)
    }
  }
}
</script>